<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
    *{      
      -webkit-touch-callout: auto; /* prevent callout to copy image, etc when tap to hold */      
      -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */      
      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */       
      -webkit-user-select:none;
    }  
    html,body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      max-width: 800px;
    }
    #paper {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 75%;
      height: 0px;
    }
  </style>
</head>
<body>
  <div>fps: <span id="fps">--</span> | sprites: <span id="spriteCount">1</span></div>
  <div id="paper"></div>
  
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
  <!--<script src="https://s2.ssl.qhres.com/!39729fa5/sprite2-1.0.0.js"></script>-->
  <script src="/js/spritejs.js"></script>
  <script>
const paper = spritejs.Paper2D('#paper'),
      fglayer = paper.layer('fglayer'),
      Label = spritejs.Label  

paper.setResolution(1600, 600) 

let snapshot1, snapshot2;

async function drawText1(){
  
  if(snapshot1) {
    //clearTimeout(timer)
    const [text1] = fglayer.putSnapshot(snapshot1)
    console.log(fglayer.getElementById('mytext'))
  } else {
    fglayer.remove()
    const text1 = new Label('SpriteJS.org')

    text1.attr({
      id: 'mytext',
      anchor: "0.5",
      pos: [400, 300],
      font: '48px Arial',
      color: '#fff',
      bgcolor: 'blue',
      renderMode: 'stroke',
      lineHeight: 100,
      scale: [paper.distortion, 1]
    })

    fglayer.appendChild(text1)
  }

  if(!snapshot1) {
    snapshot1 = await fglayer.takeSnapshot()
  }
}

async function drawText2(){
  if(snapshot2) {
    //console.log('from snapshot!')
    const [text1] = fglayer.putSnapshot(snapshot2)
  } else {
    fglayer.remove()
    const text1 = new Label('Hello world')

    text1.attr({
      //id: "mytext",
      anchor: "0.5",
      pos: [400, 300],
      font: '48px Arial',
      color: '#f0f',
      bgcolor: 'blue',
      renderMode: 'fill',
      lineHeight: 100,
      scale: [paper.distortion, 1]
    })

    fglayer.appendChild(text1)
  }

  if(!snapshot2) {
    snapshot2 = await fglayer.takeSnapshot()
  }
}

function $toggle(...functors) {
  const len = functors.length
  let idx = 0
  return function() {
    functors[idx++ % len]()
  }
}

let timer = setInterval($toggle(drawText1, drawText2), 1000)

window.addEventListener('resize', evt => {
  paper.setViewport('auto', 'auto')
})
  </script>
</body>
</html>